<template>
	<div class="subwindow">
		<!-- 侧边栏纵向布局 -->
		<div class="app-sidebar">
			<div class="has-logo">
				<el-image style="width: 30px; height: 30px" :src="logo"></el-image>
				<h1 class="sidebar-title" :title="title">{{ title }} V{{version}} </h1>
			</div>
			<div class="right-menu-btns">
				<i class="icon el-icon-minus" @click="minimizeFn"></i>
				<i class="icon el-icon-close" @click="closeFn"></i>
			</div>
		</div>
		<div class="dataBase">
			<div class="lz-header">
				<div style="display: flex;flex-wrap: wrap;align-items: center;">
					<lz-row-col lable="设备UUID">
						<el-input v-model="seach.UUID" placeholder="请输入设备UUID" :size="size"
							@keyup.enter.native="submitFormSeach"></el-input>
					</lz-row-col>
					<lz-row-col lable="检测工序">
						<el-select v-model="seach.appType" clearable placeholder="请选择" :size="size">
							<el-option label="FT1" value="FT1"></el-option>
							<el-option label="FT3" value="FT3"></el-option>
							<el-option label="FT5" value="FT5"></el-option>
						</el-select>
					</lz-row-col>
					<lz-row-col lable="是否检测完毕">
						<el-select v-model="seach.appTypeEnd" clearable placeholder="请选择" :size="size">
							<el-option label="未检测完" :value="false"></el-option>
							<el-option label="检测完" :value="true"></el-option>
						</el-select>
					</lz-row-col>
					<div>
						<el-button type="primary" icon="el-icon-search" :size="size" style="margin: 0 10px;"
							@click="submitFormSeach()">搜索</el-button>
					</div>
				</div>
			</div>
			<div class="center">
				<el-table :data="tableData" border :size="size" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
					:row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandChange">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" class="demo-table-expand" label-width="140px">
								<el-form-item :label="item.name" v-for="(item,index) in sealDetails" :key="index">
									<div class="lz-card-warp">
										<div class="lz-card" v-for="(item2,index2) in item.commands" :key="index2"
											:class="computedSuccess(item2.isSuccess)?'lz-card-success':'lz-card-warning'">
											<div class="card-title">{{item2.CommondName}}</div>
											<!-- 相机拍照 -->
											<template v-if="item2.CommondNo==3">
												<el-image :src="item2.resultData" class="el-image"
													@click="seeImage(item2.resultData)">
													<div slot="error" class="image-slot">
														<i class="el-icon-picture-outline"></i>
													</div>
												</el-image>
											</template>
											<template v-else-if="item2.CommondNo==27&&item2.resultData">
												<div class="wifi">
													<el-tag class="wifi-item" :size="size" type="info"
														v-for="(wifi,windex) in JSON.parse(item2.resultData)" :key="windex">
														{{wifi.SSID}}
													</el-tag>
												</div>
											</template>
											<template v-else>
												<div class="card-title">{{item2.resultData}}</div>
											</template>
											<i class="card-icon "
												:class="computedSuccess(item2.isSuccess)?'el-icon-success':'el-icon-error'"></i>
										</div>
									</div>
		
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column prop="createDate" label="创建日期" width="180" :show-overflow-tooltip="true"
						align="center">
					</el-table-column>
					<el-table-column prop="updateDate" label="更新日期" width="180" :show-overflow-tooltip="true"
						align="center">
					</el-table-column>
					<el-table-column prop="UUID" label="UUID" width="200" :show-overflow-tooltip="true" align="center">
					</el-table-column>
					<el-table-column prop="appType" label="检测工序" align="center" :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column prop="address" label="是否全部检测合格" width="200" align="center">
						<template slot-scope="scope">
							<el-tag :type="scope.row.appTypeEnd?'success':'danger'" :size="size">
								{{scope.row.appTypeEnd?'检测完':'未检测完'}}
							</el-tag>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination class="el-pagination-foot" @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="100"
					layout="total, sizes, prev, pager, next, jumper" :total="page.total" small>
				</el-pagination>
			</div>
			<image-viewer :z-index="8000" v-if="picture.showViewer" :on-close="closeViewer" :showIndex="picture.showIndex"
				:url-list="[{fileUrl:picture.src}]" uuid="fileId" url="fileUrl" />
		</div>
	</div>
	
</template>

<script>
	let that
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import bus from "/static/js/bus.js"
	import imageViewer from '@/components/imageViewer/imageViewer'; //图片查看器
	import lzRowCol from '@/components/lzRowCol/lzRowCol'
	const { ipcRenderer } = require("electron");
	export default {
		name: 'dataBase',
		components: {
			imageViewer,
			lzRowCol
		},
		computed: {
			...mapGetters(['userInfo','size','version','appType']),
			...mapState({
				title: state => state.settings.title,
			}),
			computedSuccess() { //检测当前项是否全部合格
				return (isSuccess) => {
					if (isSuccess == 0) {
						return true
					} else {
						return false
					}
				}
			}
		},
		data(){
			return {
				logo:require('/static/images/Log.png'),
				activeName: 1,
				picture: {
					src: '', //当前检测的照片
					showViewer: false, //图片查看器
					showIndex: 0, //点击显示图片第几个
				},
				seach: {
					UUID: '',
					appType: '', //检测工序
					appTypeEnd: '', //是否全部检测合格
				},
				sealDetails: [], //展开行印章详情
				tableData: [],
				page: {
					pageNum: 1,
					pageSize: 10,
					total: 0
				},
				getRowKeys(row) { // 行数据的Key
					return row._id
				},
				expands: [] // 通过该属性设置Table目前的展开行，需要设置row-key属性才能使用，该属性为展开行的keys数组
			}
		},
		mounted() {
			that = this
			that.queryTest()
		},
		methods: {
			//当用户对某一行展开或者关闭的时候会触发该事件
			expandChange(row, expandedRows) {
				console.log(row, expandedRows);
				//先清除之前已经渲染的数据
				that.sealDetails=[]
				//只展开一行
				this.expands = []
				if (expandedRows.length > 0) {
					row ? this.expands.push(row._id) : ''
				}
			
				let req = {
					active: 'sealDetails', //查询详情
					UUID: row.UUID,
					appType: row.appType
				}
				//查询当前行（印章检测）详细
				that.GLOBAL.doPost('https://fc-mp-d469f3c9-30d2-4936-a92e-5888ccb3dd27.next.bspapp.com/http/seachData', req).then(
					res => {
						if (res.code == 0) {
							that.sealDetails = res.data
						} else {
							that.sealDetails = []
						}
					})
			},
			//搜索
			submitFormSeach() {
				that.page.pageSize = 10
				that.page.pageNum = 1
				that.queryTest()
			},
			//图片查看
			seeImage(url) {
				that.picture.showViewer = true
				that.picture.src = url
			},
			//关闭查看图片管理器
			closeViewer() {
				this.picture.showViewer = false
			},
			async queryTest() {
				let reqData = {
					active: 'seachAllSealData',
					pageSize: that.page.pageSize, //每页返回多少个
					pageNum: that.page.pageNum, //当前页
					UUID: that.seach.UUID,
					appType: that.seach.appType, //检测工序
					appTypeEnd: that.seach.appTypeEnd //是否全部检测合格
				}
				let res = await that.GLOBAL.doPost(
					'https://fc-mp-d469f3c9-30d2-4936-a92e-5888ccb3dd27.next.bspapp.com/http/seachData', reqData)
				if (res.code == 0 && res.data) {
					that.page.total = res.data.total
					that.tableData = res.data.list
				} else {
					that.page.total = 0
					that.tableData = []
				}
			
			},
			handleSizeChange(val) {
				that.page.pageSize = val
				that.queryTest()
			},
			handleCurrentChange(val) {
				that.page.pageNum = val
				that.queryTest()
			},
			
			minimizeFn(){
				ipcRenderer.send("new-database-window",{
					action:'min-app'
				});
			},
			closeFn(){
				ipcRenderer.send("new-database-window",{
					action:'close-app',//关闭窗口
				});
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.subwindow{
		height: 100vh;display: flex;flex-direction: column;
	}
	.app-sidebar{
		position: sticky;top: 0;
		width: 100%;background-image: linear-gradient(#f0f0f0, #fff,#f0f0f0);overflow: hidden;-webkit-app-region: drag;
		display: flex;justify-content: space-between;align-items: center;padding: 10px 15px;box-sizing: border-box; 
		.has-logo{
			display: flex;align-items: center;
			.sidebar-title{
				display: inline-block;margin: 0;color: #000;
				font-weight: 600;margin-left: 10px;
				font-size: 14px;
				margin-right: 10px;
				max-width: 140px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		.has-center{
			text-align: center;
		}
		.right-menu-btns{
			-webkit-app-region: no-drag;
			.icon{cursor: pointer;margin-left: 10px;}
		}
	}
	.dataBase {
		flex: 1;overflow: auto;margin-top: 10px;
		.header {
			margin-bottom: 10px;
		}
	
		.lz-header {
			position: sticky;top: 0px;z-index: 100;
			padding-bottom: 10px;
			display: flex;
			justify-content: flex-end;
			background-color: #fff;
			border-bottom: 1px solid #f0f0f0;
		}
		.el-pagination-foot{
			float: right;margin-top: 10px;
		}
		.lz-card-warp {
			display: flex;
		}
	
		.lz-card {
			max-width: 500px;
			border-radius: 10px;
			margin-right: 10px;
			box-shadow: 1px 1px 2px 2px #f0f0f0;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			padding: 10px;
			box-sizing: border-box;
	
			.card-title {
				font-size: 11px;
				line-height: 20px;
				font-weight: bold;
				white-space: nowrap;
			}
	
			.card-icon {
				font-size: 24px;
			}
	
			.el-image {
				width: 40px;
				height: 40px;
				border-radius: 4px;
				cursor: pointer;
			}
	
			.wifi {
				display: flex;
				flex-wrap: wrap;
	
				.wifi-item {
					margin-right: 5px;
					margin-bottom: 5px;
				}
			}
		}
	
		.lz-card-success {
			color: #67C23A;
		}
	
		.lz-card-warning {
			color: #E6A23C;
		}
	}
</style>
